4.3 What is CSS?

Motivations

Read all in CSS Introduction.
- What does CSS stand for?
- What are the advantages of using CSS?
Read all in CSS Syntax.
- List the types of selectors.
- How to put comments in CSS?
Read all in CSS How To insert CSS styles.
- List the three ways to insert CSS.
- List measurement units.
  - px - pixel
  - % - relative to the dimension of the parent or the nearest positioned ancestor; base font size; ...
  - vw, vh - 1/100th of the width and height of the viewport
  - em - relative to the font-size of the element
- When multiple styles are defined for an element, which style is used? For example, between internal CSS and inline CSS.
```
<style>
    p { color:Green; }
</style>
<p style='color:Blue'>What color?</p>
```
- Trial 1: Let's try the above example. Which style has the higher priority?
- Here are some questions for further study.
  - We have discussed so far how to select elements using element names, ids, and classes.
  - How to select all the <p> that are decendents of <div>?
  - How to select all the <p> that are children of <div>?
How to combine CSS selectors? Read all in CSS Combinators.
- How to select descendants?
- How to select immediate children?
- How to select an adjacent sibling?
- How to select general siblings?
- Trial 2: Let's try to use LightBlue color text for <li> that are decendents of <li> of id='tr2'.
  <style> ??? { ??? } </style> <ol> <li ???>Contact Information <???> <li>Address: ...</li> <li>Phone: ...</li> </ul> </li> </ol>
How to react to mouse move? Read all in CSS Pseudo-classes.
- What symbols are used for the id, class, and pseudo-class selectors?
- What is the name of the pseudo-class selector for move movement over elements?
- There are some other pseudo-classes, such as number-related ones. Read all in CSS3 :nth-child() Selector.
- Trial 3: Let's try to use Grey background color for <button> of id='tr3', only when the mouse is moving over. Let's also change the cursor type to 'pointer.'
  <style> ??? { ??? background-color: LightBlue; } </style> <button ???='tr3'>Click Me!</button>
- Trial 4: Let's try to use LightBlue text color and LightYellow background color for <li> that are decendents of <li> of id='tr4', when the mouse is moving over.
  <style> ??? { width:200px; ??? } </style> <ol> <li ???>Contact Information <???> <li>Address: ...</li> <li>Phone: ...</li> </ul> </li> </ol>
- Trial 5: Let's try to use LightBlue color for the even^th rows, and LightYellow color for the odd^th rows in a table.
  <???> table???tr5 { ???:collapse; } table???tr5 td, table#tr5 th { border:1px ??? black; } table???tr5 td:??? { background-color:LightBlue; } table???tr5 ??? { background-color:LightYellow; } </style> <??? id='tr5'> <???>Required Courses</???> <tr><???>Subject</th><th>Number</th></tr> <???><???>MATH</td><td>1650</td></tr> <tr><td>MATH</td><td>1700</td></tr> <tr><td>COMP</td><td>2680</td></tr> <tr><td>COMP</td><td>2230</td></tr> </table>
Read all in CSS Selector Reference.
- List the three basic types of CSS selectors. Element, id, class, (element#id, element.class)
- How to group selectors?
- How to select child elements of an element or elements? E.g., table.tsttbl > td { ... }
- Some examples how to use the three types of CSS selectors together.
```
p { ... }
.tstclass { ... }
#tstid { ... }
p.tstclass { ... }
p#tstid { ... }
p.tstclass#tstid { ... }
.tstclass#tstid { ... }
table#tstid td, th { ... }  /* table#tstid td, and th */
p, a { ... }
```
- Some more examples
```
ul li  /* any decendent li of ul */
ul > li  /* any child li of ul */
ul, ol > li  /* ul, and ol > li */
ul > li, ol > li  /* ul > li, and ol > li */
#testtable > td, th  /* #testtable > td, and th */

<style>
    ??? > ul > li {
        color: Blue;
    }
    ??? {
        ???: Green;
    }
</style>
<div id='tr6'>
    <ul>Interesting!
        <li>Un ordered list</li>
    </ul>
    <ol>Amazing!
        <li>Ordered list</li>
    </ol>
</div>
```
- Trial 6: Let's try the above example. The text color for the ordered lists in the <div> of id='tr6' is Green.
- Here is another interesting example that uses CSS way more than previous examples. We will study this example in detail later.
  - - Sign In
    - Join
    - Forgot Password
Learning outcomes
- Use the three basic CSS selectors - element, id, class
- Use the CSS combinators - sibling, children, descendants
- Use pseudo classes